<template>
	<view class="">
		<u-navbar title="卡项订单" placeholder>
			<view class="flex align-center" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
		</u-navbar>
		<view class="pl-20 pr-20 bg-white">
			<u-tabs
				:list="subsectionList" 
				:current="curNow" 
				:scrollable="false"
				keyName="label" 
				lineColor="#e54d42"
				:activeStyle="{color: '#e54d42'}"
				@click="sectionChange" 
			/>
		</view>
		<view class="my-list">
			<u-list :height="swiperHeight" @scrolltolower="scrolltolower" v-if="dataList.length > 0">
				<u-list-item v-for="(orderIm, orderIx) in dataList" :key="orderIx" >
					<view class="item fsize-26" @click="$u.route('/pages/order/details/cardDetails', {id:orderIm.orderId, index: orderIx})">
						<view class="flex justify-between pb-20">
							<view>
								<view class="fweigh-600">{{orderIm.cardItemName}}</view>
								<view class="mt-6">No: {{ orderIm.orderId }}</view>
							</view>
							<view class="line-gray">{{orderIm.createTime}}</view>
						</view>
						<view class="flex pt-20 pb-20 border-b border-t">
							<image class="width-80 height-80 border-radius-40" :src="orderIm.userAvatarImage || '../../../static/logo.png'" />
							<view class="ml-20">
								<view class="">{{orderIm.userName}}</view>
								<view class="mt-10 line-gray">ID:{{orderIm.userId}}</view>
							</view>
						</view>
						<view class="flex justify-end pt-20">
							<view class="line-gray">
								<text>总价:</text>
								<text class="fsize-22">￥</text>
								<text>{{orderIm.projectAmount}},</text>
								<text class="ml-10">实付价:</text>
								<text class="fsize-22 line-red">￥</text>
								<text class="line-red">{{orderIm.orderAmount}}</text>
							</view>
						</view>
						<view class="flex justify-end pt-20" v-if="orderIm.status === 1">
							<view class="obtn obtn-st1" @click.stop="operate(orderIm.orderId,'cancel')">取消订单</view>
							<view class="obtn obtn-st2" @click.stop="$u.route('pages/payment/qrc', {id:orderIm.orderId, orderType: 11})">收款码</view>
							<view class="obtn obtn-st2" @click.stop="operate(orderIm.orderId, 'affirm')">确认收款</view>
						</view>
					</view>
				</u-list-item>
				<u-loadmore :status="loadmore.status" :icon-type="loadmore.iconType" :load-text="loadmore.loadText.loadText" margin-top="20" margin-bottom="20"/>
			</u-list>
		</view>
		<!-- 无数据时默认显示 -->
		<view class="emptybox" v-if="dataList.length === 0">
			<u-empty icon-size="150" text="暂无卡项列表" mode="data"></u-empty>
		</view>
		<u-popup :show="showQrc" @close="showQrc=false" mode="center">
			<image :src="qrcUrl" mode="aspectFit"/>
		</u-popup>
	</view>
</template>

<script>
	import listHeightMixin from '@/common/computedAltitude.js'
	import { mapState } from 'vuex'
	export default {
		mixins:[listHeightMixin],
		data() {
			return {
				showQrc: false,
				qrcUrl: '../../../static/1.jpg',
				subsectionList: [
					// { label: '全部', value: 0 },
					// { label: '待付款', value: 1 },
					{ label: '使用中', value: 2 },
					{ label: '已用完', value: 4 },
					{ label: '待服务', value: 5 },
					{ label: '已暂停', value: 6 },
					{ label: '已退款', value: 7 },
				],
				loadmore:{
					status: 'loadmore',
					iconType: 'flower',
					loadText: {
						loadmore: '轻轻上拉',
						loading: '努力加载中',
						nomore: '实在没有了'
					},
				},
				curNow: 0,
				dataList: [],
				searchData: {
					clientType:'',
					status: 2,
					orderType: 12,
					page: 1,
					limit: 10
				}
			}
		},
		onLoad() {
			if(this.userInfo.roleCategoryId===4){
				this.searchData.staffId = this.userInfo.userId
			}
			uni.$on('up-card', opt=>{
				this.dataList[opt.ix].statusText = opt.statusText
				this.dataList[opt.ix].status = opt.status
			})
			this.getPageList()
		},
		onUnload() {
			// 移除监听事
			uni.$off('up-card')
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			operate(id, name){
				const that = this
				uni.showModal({
					title: '提示',
					content: name==='affirm'?'确认该订单已收款?':'确认取消该订单?',
					success: function (res) {
						if (res.confirm) {
							if(name==='affirm'){
								that.$reqJsonPost('CoreCmsProjectOrderPay', {
									orderId: id,
									paymentCode: 'offline',
									type: 12,
								}).then(res=>{
									that.dataList = that.dataList.filter(item => item.orderId !== id)
								})
							}else if(name==='cancel') {
								that.$reqJsonPost('CoreCmsProjectOrderCancel', { id: [id], orderType: 12 }).then(res=>{
									that.dataList = that.dataList.filter(item => item.orderId !== id)
								})
							}
						}
					}
				})
			},
			sectionChange(e) {
				if (this.curNow === e.index) return
				this.curNow = e.index
				this.searchData = this.$options.data().searchData
				this.searchData.status = e.value
				this.dataList = []
				this.getPageList()
			},
			getPageList() {
				this.searchData.clientType = this.userInfo.roleCategoryId
				this.$reqPost('CoreCmsProjectOrderList', this.searchData).then(res => {
					this.dataList = [...this.dataList, ...res.data]
					if (res.count > this.dataList.length) {
						this.loadmore.status = 'loadmore'
						this.searchData.page++
					} else {
						// 数据已加载完毕
						this.loadmore.status = 'nomore'
					}
				})
			},
			scrolltolower() {
				if (this.loadmore.status === 'loadmore') {
					this.getPageList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url('list.scss');
</style>
